<template>
	<view class="monthly-bill-container">
		<view class="month-selector">
			<u-subsection
				:list="months"
				:current="currentMonth"
				@change="handleMonthChange"
			></u-subsection>
		</view>

		<view class="bill-content">
			<!-- 费用概览 -->
			<view class="bill-overview">
				<view class="total-amount">
					<text class="label">本月总费用</text>
					<text class="amount">¥{{billData.totalAmount}}</text>
				</view>
				<view class="detail-items">
					<view class="item">
						<text class="label">基础水费</text>
						<text class="value">¥{{billData.basicFee}}</text>
					</view>
					<view class="item">
						<text class="label">服务费</text>
						<text class="value">¥{{billData.serviceFee}}</text>
					</view>
				</view>
			</view>

			<!-- 用水分析 -->
			<view class="usage-analysis">
				<view class="section-title">用水分析</view>
				<view class="chart">
					<canvas canvas-id="lineChart" class="canvas" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
				</view>
				<view class="peak-hours">
					<view class="section-subtitle">高峰时段分析</view>
					<view class="peak-list">
						<view class="peak-item" v-for="(peak, index) in billData.peakHours" :key="index">
							<text class="time">{{peak.time}}</text>
							<text class="usage">{{peak.usage}}吨</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 费用明细 -->
			<view class="bill-details">
				<view class="section-title">费用明细</view>
				<u-cell-group>
					<u-cell
						v-for="(item, index) in billData.details"
						:key="index"
						:title="item.date"
						:label="item.type"
						:value="'¥' + item.amount"
					></u-cell>
				</u-cell-group>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<u-button type="primary" text="导出账单" @click="exportBill"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			months: ['1月', '2月', '3月', '4月', '5月', '6月'],
			currentMonth: 0,
			billData: {
				totalAmount: '128.50',
				basicFee: '98.50',
				serviceFee: '30.00',
				peakHours: [
					{ time: '早上 7:00-9:00', usage: '0.8' },
					{ time: '晚上 18:00-20:00', usage: '1.2' }
				],
				details: [
					{ date: '2025-02-15', type: '基础水费', amount: '50.00' },
					{ date: '2025-02-28', type: '基础水费', amount: '50.00' },
					{ date: '2025-02-28', type: '服务费', amount: '30.00' }
				]
			},
			chartData: {
				labels: [],
				values: []
			},
			canvasWidth: 0,
			canvasHeight: 0,
			ctx: null,
			dpr: 1
		}
	},
	onReady() {
		const sysInfo = uni.getSystemInfoSync();
		this.dpr = sysInfo.pixelRatio;
		this.canvasWidth = sysInfo.windowWidth - 40; // 考虑左右边距
		this.canvasHeight = 200;
		
		this.ctx = uni.createCanvasContext('lineChart', this);
		this.generateMockData();
		this.drawChart();
	},
	methods: {
		generateMockData() {
			const days = [];
			const values = [];
			
			for (let i = 1; i <= 30; i++) {
				days.push(i + '日');
				// 生成100-250之间的随机数，并添加一些波动趋势
				let baseUsage = 150 + Math.sin(i / 5) * 50;
				let randomVariation = Math.random() * 30 - 15;
				values.push(Math.round(baseUsage + randomVariation));
			}
			
			this.chartData.labels = days;
			this.chartData.values = values;
		},
		drawChart() {
			const ctx = this.ctx;
			const width = this.canvasWidth;
			const height = this.canvasHeight;
			const values = this.chartData.values;
			const labels = this.chartData.labels;
			
			// 清空画布
			ctx.clearRect(0, 0, width, height);
			
			// 设置边距
			const padding = {
				top: 20,
				right: 20,
				bottom: 30,
				left: 40
			};
			
			// 计算图表区域
			const chartWidth = width - padding.left - padding.right;
			const chartHeight = height - padding.top - padding.bottom;
			
			// 计算数据范围
			const maxValue = Math.max(...values) * 1.1;
			const minValue = Math.min(...values) * 0.9;
			
			// 绘制网格线和标签
			ctx.beginPath();
			ctx.setStrokeStyle('#EEEEEE');
			ctx.setLineWidth(1);
			
			// 横向网格线
			for (let i = 0; i <= 4; i++) {
				const y = padding.top + (chartHeight * i / 4);
				ctx.moveTo(padding.left, y);
				ctx.lineTo(width - padding.right, y);
				
				// 添加y轴标签
				const value = Math.round(maxValue - ((maxValue - minValue) * i / 4));
				ctx.setFillStyle('#666666');
				ctx.setFontSize(10);
				ctx.fillText(value + 'L', 5, y + 4);
			}
			
			// 绘制数据线
			ctx.beginPath();
			ctx.setStrokeStyle('#1296db');
			ctx.setLineWidth(2);
			
			for (let i = 0; i < values.length; i++) {
				const x = padding.left + (chartWidth * i / (values.length - 1));
				const y = padding.top + chartHeight - ((values[i] - minValue) / (maxValue - minValue) * chartHeight);
				
				if (i === 0) {
					ctx.moveTo(x, y);
				} else {
					ctx.lineTo(x, y);
				}
				
				// 每5个点显示一个x轴标签
				if (i % 5 === 0) {
					ctx.setFillStyle('#666666');
					ctx.setFontSize(10);
					ctx.fillText(labels[i], x - 10, height - 10);
				}
			}
			
			ctx.stroke();
			
			// 绘制数据点
			for (let i = 0; i < values.length; i++) {
				const x = padding.left + (chartWidth * i / (values.length - 1));
				const y = padding.top + chartHeight - ((values[i] - minValue) / (maxValue - minValue) * chartHeight);
				
				ctx.beginPath();
				ctx.setFillStyle('#FFFFFF');
				ctx.setStrokeStyle('#1296db');
				ctx.setLineWidth(2);
				ctx.arc(x, y, 3, 0, Math.PI * 2);
				ctx.stroke();
				ctx.fill();
			}
			
			ctx.draw();
		},
		handleMonthChange(index) {
			this.currentMonth = index
			this.fetchBillData(this.months[index])
		},
		fetchBillData(month) {
			// TODO: 从后端获取账单数据
		},
		exportBill() {
			uni.showLoading({
				title: '导出中...'
			})
			
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '账单已导出',
					icon: 'success'
				})
			}, 1500)
		},
		touchStart(e) {
			// 可以添加触摸交互
		},
		touchMove(e) {
			// 可以添加触摸交互
		},
		touchEnd(e) {
			// 可以添加触摸交互
		}
	}
}
</script>

<style lang="scss" scoped>
.monthly-bill-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;

	.month-selector {
		padding: 20rpx;
		background-color: #fff;
	}

	.bill-content {
		padding: 20rpx;

		.bill-overview {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.total-amount {
				text-align: center;
				margin-bottom: 30rpx;

				.label {
					font-size: 28rpx;
					color: #666;
					display: block;
					margin-bottom: 10rpx;
				}

				.amount {
					font-size: 48rpx;
					font-weight: bold;
					color: #1296db;
				}
			}

			.detail-items {
				display: flex;
				justify-content: space-around;

				.item {
					text-align: center;

					.label {
						font-size: 24rpx;
						color: #666;
						display: block;
						margin-bottom: 10rpx;
					}

					.value {
						font-size: 32rpx;
						color: #333;
					}
				}
			}
		}

		.usage-analysis {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.chart {
				margin: 20rpx;
				background: #ffffff;
				border-radius: 12rpx;
				padding: 20rpx;
				height: 240rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
				
				.canvas {
					width: 100%;
					height: 100%;
				}
			}

			.peak-hours {
				.section-subtitle {
					font-size: 28rpx;
					margin-bottom: 20rpx;
				}

				.peak-list {
					.peak-item {
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #eee;

						&:last-child {
							border-bottom: none;
						}

						.time {
							color: #666;
						}

						.usage {
							color: #1296db;
						}
					}
				}
			}
		}

		.bill-details {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
		}
	}

	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
}
</style>
